<template>
  <div class="number-info">
    <div class="top-info">
      <div class="title">
        <span>
          {{winningNumbers.previous.dateNo}}
        </span>
        <span>
          期开奖号码
        </span>
      </div>
      <div class="number-bar">
        <text-bar :content="winningNumbers.previous.context"></text-bar>
      </div>
    </div>
    <div class="bottom-info">
      <div class="numbers">
        <span 
          v-for="(number, index) in winningNumbers.previous.numbers.split(',')" 
          :key="index"
          class="icon button-unselected"
          >
          <i class='iconfont' :class="icon[number-1]"></i>
        </span>
      </div>
    </div>
  </div> 
</template>

<script>
import NumberSelector from '@/components/base/number-selector/number-selector'
import TextBar from '@/components/base/text-bar/text-bar'
export default {
  components: {
    NumberSelector,
    TextBar 
  },
  props: {
    winningNumbers: {
      type: Object,
      default: function() {
        return  {
          id: 3,
          lotteryName: '幸运快三',
          previous: {
            dateNo: '819048',
            numbers: '1,2,3',
            context:'13，大，单',
          }
        }
      }
    }
  },
  data() {
    return {
      icon: [
        'iconshaizi_one', 
        'iconshaizi_two', 
        'iconshaizi_three', 
        'iconshaizi_four',
        'iconshaizi_fives',
        'iconshaizi_six'
      ]
    }
  },
  methods: {
  }
}
</script>

<style lang="stylus" scoped>
    @import '~@/assets/styles/variables.styl'
    .number-info  
      .top-info 
        display flex
        align-items center
        margin-bottom 12px
        .number-bar 
          margin-left 10px
      .bottom-info
        .numbers 
          display flex
          .icon 
            width 36px
            height 36px
            border-radius 10px
            margin-right 20px
            .iconfont 
              font-size 36px
              &.iconshaizi_one 
                color $color-theme-red 
              &.iconshaizi_four
                color $color-theme-red
</style>